import { Box, Flex, Grid, GridItem, HStack, Show } from "@chakra-ui/react";
import {Suspense, useState} from "react";
import { Platform } from "./hooks/useGames";
import { Genre } from "./hooks/useGenres";
import {useRoutes} from "react-router-dom";
import routes from '@/router/index'
import AppHeader from "@/components/app-header";
import AppPlayBar from "@/views/player/app-play-bar";
import { Song } from "@/faker/songs/ranking-songs";
import { useSelector ,useDispatch } from "react-redux";
import { RootState } from "./store";
import { defaultSong } from "@/store/modules/player/reducer";
export interface GameQuery {
  genre: Genre | null;
  platform: Platform | null;
  sortOrder: string;
  searchText: string;
}

function App() {
  const [gameQuery, setGameQuery] = useState<GameQuery>({} as GameQuery);

  const dispatch = useDispatch()
  const currentSong = useSelector((state:RootState)=>state.player.currentSong)
  const songs = useSelector((state:RootState)=>state.player.playList)
  return (
    <Grid 
      
      templateAreas={{
        base: `"nav" "main" "footer"`,
        lg: `"nav nav nav" "aside main right" "footer footer footer"`,
      }}
      templateColumns={{
        base: '1fr',
        lg: 'auto 1280px auto'
      }}
      minHeight="100vh"
      templateRows={{
        base: "auto 1fr auto",
        lg: "0px 1fr 80px"
      }}
    >
      <GridItem area="nav"  >

      </GridItem>

      <GridItem area="main" >
        <AppHeader onSearch={(searchText) => setGameQuery({ ...gameQuery, searchText })} 
          />

        <Suspense fallback="">
          {useRoutes(routes)}
        </Suspense>
      </GridItem>

      <GridItem area="footer"  >
        <AppPlayBar song={currentSong || defaultSong}  songs={songs}  />
      </GridItem>
    </Grid>
  );
}

export default App;
